Setting the group sorting direction in list component in Sencha Touch
In this article, I’m explaining how to set the group sorting direction in list component in sencha touch.
If you want to learn how to create a list in sencha touch, you can read my previous article on list component:
http://www.mindstick.com/Articles/d6eaa43d-649b-4da3-a450-000fce8c2ae3/?List%20in%20Sencha%20Touch
http://www.mindstick.com/Articles/0e03392f-fe6c-46dc-a1d9-bc7536704749/?Index%20Bar%20in%20Sencha%20Touch
Example
Step-1:
Firstly create a store and named it TeamStore and add three fields name, league and division then add data to the store through data configuration. Add a sorter to the store through sorters configuration and set the property to name so that the sorter will sort the data according to name field, also add a grouper to the store through grouper configuration and a grouper function.
Ext.define('MyApp.store.TeamStore', {
extend: 'Ext.data.Store',
config: {
data: [
{
name: 'New York Yankee',
league: 'AL',
division: 'East'
},
{
name: 'Tampa Bay',
league: 'AL',
division: 'East'
},
{
name: 'Boston',
league: 'AL',
division: 'East'
},
{
name: 'Toronto',
league: 'AL',
division: 'East'
},
{
name: 'Baltimore',
league: 'AL',
division: 'East'
},
{
name: 'Detroit',
league: 'AL',
division: 'Central'
},
{
name: 'CleveLand',
league: 'AL',
division: 'Central'
},
{
name: 'Chicago White Sox',
league: 'AL',
division: 'Central'
},
{
name: 'Kansas City',
league: 'AL',
division: 'Central'
},
{
name: 'Minniesota',
league: 'AL',
division: 'Central'
},
{
name: 'Texas',
league: 'AL',
division: 'West'
},
{
name: 'Los Angeles Angels',
league: 'AL',
division: 'West'
},
{
name: 'Oakland',
league: 'AL',
division: 'West'
},
{
name: 'Seattle',
league: 'AL',
division: 'West'
}
],
groupDir: 'DESC',
storeId: 'TeamStore',
fields: [
{
name: 'name'
},
{
name: 'league'
},
{
name: 'division'
}
],
sorters: {
property: 'name'
},
grouper: {
groupFn: function(item) {
return item.get('name')[0];
}
}
}
});Step-2:
Next add a list to the project and add store to it, drag-n-drop a toolbar to the list and add two buttons to the toolbar.
Ext.define('MyApp.view.MyList', {
extend: 'Ext.dataview.List',
config: {
store: 'TeamStore',
grouped: true,
itemTpl: [
'<div>{name}</div>'
],
items: [
{
xtype: 'toolbar',
docked: 'top',
items: [
{
xtype: 'button',
id: 'ASC',
itemId: 'mybutton',
text: 'groupDir=ASC'
},
{
xtype: 'button',
id: 'DESC',
itemId: 'mybutton1',
text: 'groupDir=DESC'
}
]
}
],
listeners: [
{
fn: 'onASCTap',
event: 'tap',
delegate: '#ASC'
},
{
fn: 'onDESCTap',
event: 'tap',
delegate: '#DESC'
}
]
},
onASCTap: function(button, e, eOpts) {
Ext.getStore('TeamStore').setGroupDir('ASC').sort();
},
onDESCTap: function(button, e, eOpts) {
Ext.getStore('TeamStore').setGroupDir('DESC').sort();
}
});
Output
Currently the list sorted in descending order but when you tap on groupDir=ASC button, the list will sort in ascending order like this:
Leave Comment